<template>
  <el-dialog
    v-model="visible"
    :title="operation == 'create' ? '添加优惠卷' : '编辑优惠卷'"
    @before-ok="createOk"
    @close="close(createRef)"
    width="700px"
    top="100px"
  >
    <div style="width: 600px">
      <el-form
        :model="createForm"
        ref="createRef"
        :rules="createRules"
        label-width="130px"
        size="default"
        v-loading="initLoading"
      >
        <el-form-item label="优惠劵类型：" prop="coupon_type">
          <el-radio-group v-model="createForm.coupon_type">
            <el-radio label="decrement" border>满减券</el-radio>
            <el-radio label="discount" border>折扣券折扣券</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="优惠券名称：" prop="coupon_name">
          <el-input
            v-model="createForm.coupon_name"
            placeholder="请输入优惠券名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="createForm.coupon_type == 'decrement'"
          label="减免金额："
          prop="reduce_price"
        >
          <el-input
            v-model="createForm.reduce_price"
            placeholder="请输入减免金额"
          >
            <template #suffix> 元 </template>
          </el-input>
        </el-form-item>
        <el-form-item
          v-if="createForm.coupon_type == 'discount'"
          label="折扣率："
          prop="discount"
        >
          <el-input v-model="createForm.discount" placeholder="请输入折扣率"
            ><template #suffix> 折 </template></el-input
          >
          <help hideIcon>折扣率范围0-10，9.5代表9.5折，0代表不折扣</help>
        </el-form-item>
        <el-form-item label="最低消费金额：" prop="min_price">
          <el-input
            v-model="createForm.min_price"
            placeholder="请输入最低消费金额"
          >
            <template #suffix> 元 </template>
          </el-input>
        </el-form-item>
        <el-form-item label="到期类型：" prop="expire_type">
          <el-radio-group v-model="createForm.expire_type">
            <el-radio :label="1">领取后生效</el-radio>
            <el-radio :label="2">固定时间</el-radio>
          </el-radio-group>
          <help hideIcon
            >注：如需使用积分功能必须在 [营销管理 - 积分设置] 中开启</help
          >
        </el-form-item>
        <el-form-item
          v-if="createForm.expire_type == 2"
          label="时间范围："
          required
        >
          <el-form-item prop="start_time">
            <el-time-select
              v-model="createForm.start_time"
              placeholder="开始时间"
              start="00:00"
              step="00:15"
              end="23:59"
            />
          </el-form-item>
          <span class="ml10 mr10">至</span>
          <el-form-item prop="end_time">
            <el-time-select
              v-model="createForm.end_time"
              placeholder="结束时间"
              start="00:00"
              step="00:15"
              end="23:59"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item
          v-if="createForm.expire_type == 1"
          label="有效天数："
          prop="expire_day"
        >
          <el-input
            v-model="createForm.expire_day"
            placeholder="请输入有效天数"
          >
            <template #suffix> 天 </template>
          </el-input>
          <help hideIcon>天数最小必须为1</help>
        </el-form-item>
        <el-form-item label="发放总数量：" prop="total_num">
          <el-input
            v-model="createForm.total_num"
            placeholder="请输入发放总数量"
          >
          </el-input>
          <help hideIcon>限制领取的优惠券数量，-1为不限制</help>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="flex center">
        <el-button @click="visible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="btnLoading"
          :disabled="btnLoading"
          @click="createOk(createRef)"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
  
  <script lang="ts">
export default {
  name: "addonCoupoonCreate",
};
</script>
  
  <script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive } from "vue";
import type { FormInstance } from "element-plus";
import {} from "@/api/store/goods_server";
import type { Result, ResultError } from "@/types";

const {
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["success"]);

const visible = ref<boolean>(false);

const operation = ref<string>("create");

const operationId = ref<number>(0);

const createRef = ref<typeof FormInstance>();

const btnLoading = ref<boolean>(false);

const parentTree = ref<any>([]);

const initLoading = ref<boolean>(true);

const toInit = () => {
  if (!operationId.value) {
    initLoading.value = false;
    return;
  }
};

const createForm = ref({
  coupon_name: "",
  coupon_type: "decrement",
  reduce_price: "",
  discount: "",
  min_price: "",
  expire_type: 1,
  start_time: "",
  end_time: "",
  expire_day: "",
  total_num: "",
});
const createRules: any = reactive({
  coupon_name: [{ required: true, message: "请输入优惠券名称" }],
  reduce_price: [{ required: true, message: "请输入减免金额" }],
  discount: [{ required: true, message: "请输入折扣率" }],
  min_price: [{ required: true, message: "请输入最低消费金额" }],
  start_time: [{ required: true, message: "请输入开始时间" }],
  end_time: [{ required: true, message: "请输入结束时间" }],
  expire_day: [{ required: true, message: "请输入有效天数" }],
  total_num: [{ required: true, message: "请输入优惠劵发放总数量" }],
});

const createOk = async (formEl: typeof FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (btnLoading.value) {
        return;
      }
      btnLoading.value = true;
      let operationApi: any = null;
    }
  });
};

const open = (type: string, id: number = 0) => {
  initLoading.value = true;
  createForm.value.coupon_type = type;
  if (id != 0) {
    operation.value = "update";
    operationId.value = id;
  } else {
    operation.value = "create";
  }
  nextTick(() => {
    toInit();
  });
  visible.value = true;
};

const close = async (formEl: typeof FormInstance | undefined) => {
  if (formEl) {
    formEl.resetFields();
  }
  operationId.value = 0;
  visible.value = false;
};

defineExpose({ open });
</script>